<template>
<div>
      <h2>此页面为开发人员测试页,您可不予理会</h2>
     <el-row>

        <el-col>
          <el-button type="primary" @click='addRole'>添加角色</el-button>
        </el-col>
      </el-row>
       <el-dialog title="添加角色" :visible.sync="showaddtRoleDialog" width="50%">
      <el-form
        :model="roleInfo"
        label-width="80px"
        ref="roleAddForm"
        :rules="addrules"
      >
        <el-form-item prop="roleName" label="角色名称">
          <el-input
            v-model="roleInfo.roleName"
            placeholder="请输入角色名称"
          ></el-input>
        </el-form-item>
        <el-form-item prop="roleDesc" label="角色描述">
          <el-input
            v-model="roleInfo.roleDesc"
            placeholder="请输入该角色的描述(选填)"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelEdit">取 消</el-button>
        <el-button type="primary" @click="submitRole">提交</el-button>
      </span>
    </el-dialog>
</div>
 
</template>

<script>
import {addRolePost} from 'network/axios'
export default {
            name:'AddRole',
            data(){
                return{
                    showaddtRoleDialog:false,
                    roleInfo:{
                        roleName:'',
                        roleDesc:''
                    },
                    addrules:{
                        roleName: [
          { required: true, message: "角色名不能为空", trigger: "blur" },
        ]           }
                }
            },
            methods:{
                     cancelEdit(){
                this.showaddtRoleDialog=false
                this.$message("您取消了添加角色");
            },
            addRole(){
                this.showaddtRoleDialog=true
                
            },
            submitRole(){
                this.$refs.roleAddForm.validate(flag=>{
                if(!flag)
                return
                addRolePost(this.roleInfo).then(res=>{
                    if(res.data.meta.status!=201)
                    return this.$message.error('添加失败')
                    this.$message.success('添加角色成功')
                    this.showaddtRoleDialog=true
                    this.$router.replace('/home/role')
                })
                })
            }
            },

           
}
</script>

<style>

</style>